﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Grid Component</title>
    <link rel="stylesheet" type="text/css" href="Grid Component.css" />
    <script type="text/javascript">
        function goToNewPage() {
            var url = document.getElementById("list").value;
            if (url != "none") {
                window.location = url;
            }
        }
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td class="topRadius" colspan="6">Drag a column header and drop it here to group by that column.</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td id="footerTd" class="bottomRadius" colspan="6">
                    <input class="footerButton" type="image" src="last-left-button.png" alt="last-left-button" />
                    <input class="footerButton" type="image" src="left-button.png" alt="left-button" />
                    <a href="#">1</a>
                    <a href="SecondPage.html">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#">6</a>
                    <a href="#">7</a>
                    <a href="#">8</a>
                    <a href="#">9</a>
                    <a href="#">10</a>
                    <span>...</span>
                    <input class="footerButton" type="image" src="right-button.png" alt="right-button" />
                    <input class="footerButton" type="image" src="last-right-button.png" alt="last-right-button" />
                    <span id="pageSize">Page size: </span>
                    <select id="list">
                        <option value="none" selected="selected">1</option>
                        <option value="SecondPage.html" onclick="goToNewPage()">2</option>
                        <option value="none">3</option>
                        <option value="none">4</option>
                        <option value="none">5</option>
                        <option value="none">6</option>
                        <option value="none">7</option>
                        <option value="none">8</option>
                        <option value="none">9</option>
                        <option value="none">10</option>
                    </select>
                    <span id="footerRight">335104 items in 33511 pages</span>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr class="gray">
                <td>ProductID</td>
                <td>Product Name</td>
                <td>Unit Price</td>
                <td>Quantity Per Unit</td>
                <td>Units In Stock</td>
                <td>Discontinued</td>
            </tr>
            <tr class="gray">
                <td>
                    <form id="productID">
                        <input type="text" name="productID" />
                    </form>
                </td>
                <td>
                    <form id="productName">
                        <input type="text" name="productName" />
                        <input type="image" src="filter.png" alt="filter" class="filterInline" />
                    </form>
                </td>
                <td>
                    <form id="unitPrice">
                        <input type="text" name="unitPrice" />
                        <!--<button class="filterExternal"></button>-->
                    </form>
                </td>
                <td>
                    <form id="quantityPerUnit">
                        <input type="text" name="quantityPerUnit" />
                    </form>
                </td>
                <td>
                    <form id="unitsInStock">
                        <input type="text" name="unitsInStock" />
                        <!--<button class="filterExternal"></button>-->
                    </form>
                </td>
                <td>
                    <form id="discontinued" productname>
                        <input type="checkbox" name="discontinued" value="apply" />
                        <!--<button class="filterExternal"></button>-->
                    </form>
                </td>
            </tr>
            <tr>
                <td>1</td>
                <td>Chai</td>
                <td>$18.00</td>
                <td>10 boxes x 20 bags</td>
                <td>39</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>Chang</td>
                <td>$19.00</td>
                <td>24 - 12 oz bottles</td>
                <td>17</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>Anised Syrup</td>
                <td>$10.00</td>
                <td>12 - 550 ml bottles</td>
                <td>13</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>Chef Anton's Cajun Seasoning</td>
                <td>$22.00</td>
                <td>48 - 6 oz jars</td>
                <td>53</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>Chef Anton's Gumbo Mix</td>
                <td>$21.35</td>
                <td>36 boxes</td>
                <td>0</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" checked="checked" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>6</td>
                <td>Grandma's Boysenberry Spread</td>
                <td>$25.00</td>
                <td>12-8 oz jars</td>
                <td>120</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>7</td>
                <td>Uncle Bob's Organic Dried Pears</td>
                <td>$30.00</td>
                <td>12 - 1 lb pkgs.</td>
                <td>15</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>8</td>
                <td>Northwoods Cranberry Sauce</td>
                <td>$40.00</td>
                <td>12 - 12 oz jars</td>
                <td>6</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>9</td>
                <td>Mishi Kobe Niku</td>
                <td>$97.00</td>
                <td>18 - 500 g pkgs.</td>
                <td>29</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" checked="checked" />
                    </form>
                </td>
            </tr>
            <tr>
                <td>10</td>
                <td>Ikura</td>
                <td>$31.00</td>
                <td>12 - 200 ml jars</td>
                <td>31</td>
                <td>
                    <form>
                        <input type="checkbox" name="discontinued" value="apply" />
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>
